<template>
  <div class="page">
    <div class="weui-panel weui-panel_access">
      <div v-if="!order.id" class="weui-panel__hd">请确认预约表单</div>
      <div v-if="order.id" class="weui-panel__hd">预约详情</div>
    </div>
    <div class="weui-form-preview">
      <div class="weui-form-preview__hd">
        <div class="weui-form-preview__item">
          <div class="weui-form-preview__label">类型</div>
          <div class="weui-form-preview__value_in-hd">{{ product.category.name }}</div>
        </div>
      </div>
      <div class="weui-form-preview__bd">
        <div class="weui-form-preview__item">
          <div class="weui-form-preview__label">手机号码</div>
          <div class="weui-form-preview__value_in-hd">{{ user.phone }}</div>
        </div>
        <div class="weui-form-preview__item">
          <div class="weui-form-preview__label">名称</div>
          <div class="weui-form-preview__value_in-hd">{{ product.name }}</div>
        </div>
        <div class="weui-form-preview__item">
          <div class="weui-form-preview__label">简介</div>
          <div class="weui-form-preview__value">{{ product.description }}</div>
        </div>
      </div>
      <div :class="order.id ? 'weui-form-preview__bd' : 'weui-form-preview__hd'">
        <div class="weui-form-preview__item">
          <div class="weui-form-preview__label">选择预约</div>
          <div v-if="!order.id" class="weui-form-preview__value_in-hd">
            <picker class="weui-btn" mode="date" :value="date" start="2018-10-10" end="2099-01-01" @change="handleDateChange">
              <p>{{ date }}</p>
            </picker>
            <picker class="weui-btn" mode="time" :value="time" start="09:00" end="17:00" @change="handleTimeChange">
              <p>{{ timeStr }}</p>
            </picker>
          </div>
          <div v-if="order.id" class="weui-form-preview__value">
            <text>{{ order.appointmentStr }}</text>
          </div>
        </div>

        <div class="weui-form-preview__item">
          <div class="weui-form-preview__label">备注</div>
          <div v-if="!order.id" class="weui-form-preview__value">
            <textarea class="textarea" placeholder="有需要备注请填写" v-model="description" />
            </div>
          <div v-if="order.id" class="weui-form-preview__value">
            <text>{{ order.description }}</text>
          </div>
        </div>
        <div v-if="order.id" class="weui-form-preview__item">
          <div class="weui-form-preview__label">状态</div>
          <div class="weui-form-preview__value">
          <text>已预约</text>
          </div>
        </div>
      </div>
      <div class="weui-form-preview__ft">
        <p v-if="!order.id" @click="handleSubmit" class="weui-form-preview__btn weui-form-preview__btn_primary" hover-class="weui-form-preview__btn_active">确定</p>
        <p v-if="order.id" @click="handleGoBack" class="weui-form-preview__btn weui-form-preview__btn" hover-class="weui-form-preview__btn_active">返回</p>
      </div>
    </div>
  </div>
</template>

<script>
import productFragment from '@/graphql/fragment/product.graphql'
import orderFragment from '@/graphql/fragment/order.graphql'
import MutationCreateOrder from '@/graphql/Mutation/CreateOrder.graphql'
// import QueryOrders from '@/graphql/Query/Orders.graphql'

import { formatTime } from '@/utils'

export default {
  data () {
    return {
      product: {},
      user: {},
      time: '17:00',
      timeStr: '17-18点范围',
      date: formatTime(new Date()).split(' ')[0],
      description: '',
      order: {}
    }
  },
  methods: {
    handleTimeChange (e) {
      // console.log(e.mp.detail.value)
      if (this.date + ' ' + e.mp.detail.value + ':00' < formatTime(new Date())) {
        wx.showToast({
          icon: 'none',
          title: '选择时间不能早于当前时间'
        })
        return false
      }
      this.time = e.mp.detail.value
      const t = this.time.split(':')[0]
      this.timeStr = t + '-' + (parseInt(t) + 1) + '点范围'
    },
    handleDateChange (e) {
      // console.log(e.mp.detail.value, formatTime(new Date()).split(' ')[0])
      if (e.mp.detail.value < formatTime(new Date()).split(' ')[0]) {
        wx.showToast({
          icon: 'none',
          title: '选择日期不能早于当前日期'
        })
        return false
      }
      this.date = e.mp.detail.value
    },
    handleSubmit () {
      if (this.date < formatTime(new Date()).split(' ')[0]) {
        wx.showToast({
          icon: 'none',
          title: '选择日期不能早于当前日期'
        })
        return false
      }
      if (this.date + ' ' + this.time + ':00' < formatTime(new Date())) {
        wx.showToast({
          icon: 'none',
          title: '选择的小时不能早于当前时间'
        })
        return false
      }
      /* this.$apollo.mutate({
        mutation: MutationCreateOrder,
        variables: {
          productId: this.$root.$mp.query.id,
          appointment: new Date(this.date + ' ' + this.time + ':00'),
          description: this.description
        }
      })
        .then(result => {
          // console.log(result)
          const url = `../status/main?orderId=${result.data.createOrder.id}`
          wx.redirectTo({ url })
        })
        .catch(error => {
          // console.log(error)
        }) */

      this.$apollo.mutateLoading({
        mutation: MutationCreateOrder,
        variables: {
          productId: this.$root.$mp.query.id,
          appointment: new Date(this.date + ' ' + this.time + ':00'),
          description: this.description
        }/* ,
        update: (proxy, { data: { createOrder } }) => {
          const data = proxy.readQuery({
            query: QueryOrders
          })
          // console.log(data)
          data.orders.append(createOrder)
          proxy.writeQuery({
            query: QueryOrders,
            data
          })
        } */
      }, result => {
        // console.log(result)
        const url = `../status/main?orderId=${result.data.createOrder.id}`
        wx.redirectTo({ url })
      }, () => {
        // console.log(error)
        wx.showToast({
          icon: 'none',
          title: '预约出错, 请重试'
        })
      })
    },
    handleGoBack () {
      wx.navigateBack({ delte: 1 })
    }
  },

  onLoad () {
    // console.log(this.$root.$mp.query)
    if (this.$root.$mp.query && this.$root.$mp.query.orderId) {
      this.order = this.$apollo.readFragment({
        id: 'Order:' + this.$root.$mp.query.orderId,
        fragment: orderFragment,
        fragmentName: 'order'
      })
      this.product = this.order.product
      this.user = this.order.user
      this.order.appointmentStr = formatTime(new Date(this.order.appointment))
      return
    }
    this.product = this.$apollo.readFragment({
      id: 'Product:' + this.$root.$mp.query.id,
      fragment: productFragment,
      fragmentName: 'product'
    })
    this.user = wx.getStorageSync('user')
    // console.log(this.$root.$mp.query.id, this.$apollo)
  }
}
</script>

<style>
.textarea {
  height: 50px;
  width: 100%;
}
</style>